<template>
  <div>
    <a style="color:cadetblue;font-size: 25px; top: 50px;">屠宰信息</a> <el-button @click="updateorAdd()">设置</el-button>
 <hr>
 <table width="1000px">
  <tr>
    <td>批次{{ breedhtml.slaughterlot }}</td>
    <td>到厂均重{{ breedhtml.slaugherWeight }}</td>
  </tr>
  <tr>
    <td>到厂时间{{ breedhtml.slaugherComeTime }}</td>
    <td>屠宰时间{{ breedhtml.slaugherTime }}</td>
  </tr>
 </table>
  </div>
<div style="margin-top: 100px;">
  <a style="color:cadetblue;font-size: 25px;" >相关资质</a>
 <hr>
 <table>
  <tr>
    <td style="width: 1500px;">
      <div v-for="item in breedhtml.slaughteringenterprise" style="width: 100%;">
      <el-button class="images" type="danger" :icon="Delete" circle @click="deel(item.coreImages,item.productionimagesid)"></el-button>
  <img style="width: 150px;height: 150px;" class="buttonss" :src="item.coreImages" > 
     </div>
      <el-button  list-type="picture-card" @click="GETimages()" style="width: 120px;height: 120px;">
     <el-icon><Plus /></el-icon>
 </el-button>
    </td>
  </tr>
 </table>
</div>
<div style="margin-top: 100px;">
  <a style="color:cadetblue;font-size: 25px;">企业信息</a> <el-button @click="ProDction()" >设置</el-button>
 <hr>
 <table width="1000px" v-if="getnwe!=null">
  <tr>
    <td>公司名称{{ getnwe
.bossName }}</td>
    <td>成立时间{{ getnwe.setupTime }}</td>
  </tr>
  <tr>
    <td>公司地址{{ getnwe.provincename }}{{ getnwe.cityname }}{{ getnwe.countyname }}</td>
  </tr>
  <tr>
    <td>公司简介{{ getnwe.bossIntroMess }}</td>
  </tr>
 </table>
</div>
<div style="margin-top: 100px;" >
  <a style="color:cadetblue;font-size: 25px;">企业照片</a>
 <hr>
 <table >
  <tr style="width: 1000px;">
    <td style="width: 1500px;">
      <div v-for="item in breedhtml.
correlation" style="width: 100%;">
          <el-button class="images" type="danger" :icon="Delete" circle @click="deel(item.coreImages,item.productionimagesid)"></el-button>
        <img style="width: 150px;height: 150px;" class="buttonss" :src="item.coreImages" > 
     </div>
      <el-button  list-type="picture-card" @click="GETimagest()" style="width: 120px;height: 120px;">
  <el-icon><Plus /></el-icon>
 </el-button>
    </td>
  </tr>
 </table>
</div>
<el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
    <el-form :model="form"    ref="ruleFormRef"
    style="max-width: 600px"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon>
      <el-form-item label="批次" :label-width="formLabelWidth" prop="slaughterlot">
        <el-input v-model="form.slaughterlot" autocomplete="off" />
      </el-form-item>
      <el-form-item label="到厂均重" :label-width="formLabelWidth" prop="slaugherWeight">
        <el-input v-model="form.slaugherWeight" autocomplete="off" />
      </el-form-item>
      <el-form-item label="到厂时间" :label-width="formLabelWidth" prop="slaugherComeTime">
        <el-date-picker
          v-model="form.slaugherComeTime"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="屠宰时间" :label-width="formLabelWidth" prop="slaugherTime">
        <el-date-picker
          v-model="form.slaugherTime"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm(ruleFormRef)">添加</el-button>
        <el-button type="primary" @click="resetForm(ruleFormRef)">
        取消
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogFormVisibles" title="Shipping address" width="500">
    <el-form :model="from_"    ref="ruleFormRef"
    style="max-width: 600px"
    :rules="ruless"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon>
      <el-form-item label="公司名称" :label-width="formLabelWidth" prop="bossName">
        <el-input v-model="from_.bossName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="公司地址" :label-width="formLabelWidth" prop="provinceid">
      <el-select v-model="from_.provinceid" placeholder=""   @change="GETtwo()">
        <el-option :label="item.provinceName" :value="item.provinceId" v-for=" item in GETonex" />
      </el-select>
      <el-select v-model="from_.cityid" placeholder="" @change="GEThree()">
        <el-option :label="item.cityName" :value="item.cityid" v-for="item in GETtwox" />
      </el-select>
      <el-select v-model="from_.countyid" placeholder="">
        <el-option :label="item.countyName" :value="item.coutnyid" v-for="item in GEthrees" />
      </el-select>
      </el-form-item>
      <el-form-item label="成立时间" :label-width="formLabelWidth" prop="setupTime">
        <el-date-picker
          v-model="from_.setupTime"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />

      </el-form-item>
      <el-form-item label="公司简介" :label-width="formLabelWidth" prop="bossIntroMess">
        <el-input v-model="from_.bossIntroMess" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForms(ruleFormRef)">添加</el-button>
        <el-button type="primary" @click="resetForm(ruleFormRef)">
        取消
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogFormVisibless" title="添加图片" width="500">
            <el-form :model="form">   
              <el-upload
              class="avatar-uploader"
              action="https://localhost:7116/api/SourceController1/GETimages"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="form.iamges" :src="form.iamges" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="getLeadingCommentRanges()">确认</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">
                  取消
                </el-button>
                  </div>
                </template>
              </el-dialog>

              <el-dialog v-model="dialogFormVisibleone" title="添加图片" width="500">
            <el-form :model="form">   
              <el-upload
              class="avatar-uploader"
              action="https://localhost:7116/api/SourceController1/GETimages"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="form.iamges" :src="form.iamges" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="getLeadingCommentONe()">确认</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">
                  取消
                </el-button>
                  </div>
                </template>
              </el-dialog>



</template>
<script lang="ts" setup>
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
  import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useRouter,useRoute } from 'vue-router';
const route=useRoute()
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
const router=useRouter();
const dialogFormVisibles = ref(false)
const dialogFormVisible = ref(false)
const dialogFormVisiblet = ref(false)
const dialogFormVisibless = ref(false)
const dialogFormVisibleone = ref(false)
const formLabelWidth = '140px'
const form=reactive({
  slaughterlot: "",
  slaugherWeight: 0,
  slaugherComeTime: "",
  slaugherTime: "",
  proDuctionBasicid: 0,
  iamges:''
})
const from_=reactive({
  bossName: "",
  provinceid: "",
  cityid: "",
  countyid: "",
  setupTime: "",
  bossIntroMess: "",
  proDuctionBasicid: 0
})
onMounted(()=>{

  breedhtmls()
open()
GETone()

})

/////////////////////////////////////////

// 这个页面从养殖信息粘过来的命名方式没改后期优化

///////////////////////////



const open=(()=>{

  let gh= route.query.id

if(Number(gh)==2)
{
  breedhtmls()
  updateorAdd()
} if(Number(gh)==3)
{
  breedhtmls()
  ProDction()
}

})



const breedhtml=ref([])
const getnwe=ref([])
///屠宰信息显示
const breedhtmls=(()=>{
  var  proDuctionBasicid=localStorage.getItem('Details');
  axios.post('https://localhost:7116/api/SlaughterCreateController1/SlaughterinformationdisplayHtml',{
    proDuctionBasicid: Number(proDuctionBasicid)
  }).then(res=>{

      breedhtml.value=res.data.data
      getnwe.value=breedhtml.value.newcity[0]
      console.log(breedhtml.value.newcity[0],'zzzzzzzzzz')
  })

})


const rules = reactive({
  slaughterlot: [
    { required: true, message: '批次不能为空', trigger: 'blur' },
  ],
  slaugherWeight: [
    {
      required: true,
      message: '到厂均重',
      trigger: 'change',
    },
  ],
  slaugherComeTime: [
    {
      required: true,
      message: '到厂时间',
      trigger: 'change',
    },
  ],
  slaugherTime: [
    {
      required: true,
      message: '屠宰时间',
      trigger: 'change',
    },
  ],
 
})

const ruless = reactive({
  
  bossName: [
    {

      required: true,
      message: '公司名称不能为空',
      trigger: 'change',
    },
  ],
  farmName: [
    {
      required: true,
      message: '负责人不能为空',
      trigger: 'change',
    },
  ],
  setupTime: [
    {
      required: true,
      message: '成立时间不能为空',
      trigger: 'change',
    },
  ],
  bossIntroMess: [
    {
      required: true,
      message: '公司简介不能为空',
      trigger: 'change',
    },
  ],


})

///屠宰信息添加
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid, fields) => {

  var proDuctionBasicid=localStorage.getItem('Details');
  if (valid) {

      

    axios.post('https://localhost:7116/api/SlaughterCreateController1/SlaughterCreateAdd',{
      slaughterlot: form.slaughterlot,
  slaugherWeight: form.slaugherWeight,
  slaugherComeTime: form.slaugherComeTime,
  slaugherTime: form.slaugherTime,
  proDuctionBasicid: Number(proDuctionBasicid)
}


    ).then(res=>{
      if(res.data.code==1)
    {
        ElMessage.success("添加成功");
        router.push('/Slaughtering')
    }

    })
    dialogFormVisible.value=false;

  } else {
    console.log('error submit!', fields)
  }
})
}
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
dialogFormVisible.value=false;
dialogFormVisibles.value=false;
}
//触发打开弹出框
const updateorAdd=(()=>{

  dialogFormVisible.value=true;

})
//触发弹出框
const ProDction=(()=>{
  dialogFormVisibles.value=true;
})

//屠宰企业信息添加
const submitForms = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
  var proDuctionBasicid=localStorage.getItem('Details');


  if (valid) {
    axios.post('https://localhost:7116/api/SlaughterCreateController1/SlaughteringenterprisCreate',{

      bossName: from_.bossName,
      provinceid: Number(from_.provinceid),
      cityid: Number(from_.cityid),
      countyid: Number(from_.countyid),
      setupTime: from_.setupTime,
      bossIntroMess: from_.bossIntroMess,
     proDuctionBasicid: Number(proDuctionBasicid)

  



          }).then(res=>{
          if(res.data.code==0)
          { 
            ElMessage.success('设置成功')
            breedhtmls()
          }
          dialogFormVisible.value=false;
          })
  } else {
    console.log('error submit!', fields)
  }
})
}



// const AddThey=(()=>
// {

// from_.get=1;

// })



const GETimages=(()=>{

  dialogFormVisibless.value=true;

})


const handleAvatarSuccess = (url:any) => {
form.iamges="https://localhost:7116"+url
}

const beforeAvatarUpload = (rawFile:any) => {
  if (rawFile.type !== 'image/jpeg'&&
    rawFile.type !== 'image/jpg'&&
    rawFile.type !== 'image/png'
  ) {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

///相关资质图片添加
const getLeadingCommentRanges=(()=>{


var proDuctionid=localStorage.getItem('Details')
axios.post('https://localhost:7116/api/SlaughterCreateController1/SlaughterCreateImagesAdd',{ 
  proDuctionBasicid: Number(proDuctionid),
  iamges: form.iamges
}).then(res=>{


  console.log(res.data.data,'22222222')
  if(res.data.data==1)
{
  ElMessage.success('添加成功')
  dialogFormVisibless.value=false;
  form.iamges='';
  breedhtmls()
}
if(res.data.data==-7)
{
  
 ElMessage.error('最多只能添加6条')
}

})


})


const GETimagest=(()=>{
  dialogFormVisibleone.value=true;
})





//屠宰企业照片添加
const getLeadingCommentONe=(()=>{


var proDuctionid=localStorage.getItem('Details')
axios.post('https://localhost:7116/api/SlaughterCreateController1/RelevantqualifiedenterpriseAdd',{ 
  proDuctionBasicid: Number(proDuctionid),
  iamges: form.iamges
}).then(res=>{


  console.log(res.data.data,'22222222')
  if(res.data.data==1)
{
  ElMessage.success('添加成功')
  dialogFormVisibleone.value=false;
  form.iamges='';
  breedhtmls()
}
if(res.data.data==-7)
{
  
 ElMessage.error('最多只能添加6条')
}
})
})

//删除所有方法都可用
const deel=((imagest:any,ProductionImagesid:number)=>{


var ProductionImagesids=localStorage.getItem('Details');

axios.post('https://localhost:7116/api/SourceController1/Deel',{
  ProDtctionid:Number(ProductionImagesids),
  images:imagest
}).then(res=>{
  if(res.data.code==0)
{
  ElMessage.success('删除成功');
  breedhtmls()
}

})


})


//省
const GETonex=ref()
const GETone=(()=>{


  axios.post('https://localhost:7116/api/SlaughterCreateController1/provinc',{}).then(res=>{
    GETonex.value=res.data.data
  })


}) 

const GETtwox=ref()
const GETtwo=(()=>{

  from_.cityid="";
  from_.countyid="";
  axios.post('https://localhost:7116/api/SlaughterCreateController1/City',{
    pid: Number(from_.provinceid)
  }).then(res=>{

    GETtwox.value=res.data.data
  })

  

}) 



const GEthrees=ref()
const GEThree=(()=>{

from_.countyid="";
  axios.post('https://localhost:7116/api/SlaughterCreateController1/county',{
    xid: Number(from_.cityid)

  }).then(res=>{
  GEthrees.value=res.data.data
  })
}) 


</script>

<style scoped>

.images{

top: 0px;
width: 20px;
height: 20px;
float: left;
left: 150px;
z-index: 2;
position: relative;
cursor: pointer;
}
.buttonss{
float: left;
z-index: 1;
border: none;
}
</style>
